<template>
    <div class="addGoods">
        <el-form label-width="80px"  ref="addForm">
            <el-form-item label="商品名称" >
                <el-input placeholder="商品名称" style="width: 400px;" v-model="goods.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" >
                <el-select placeholder="请选择分类" v-model="goods.categoryId">
                    <el-option :label="item.categoryName" :value="item.categoryId" v-for="(item, index) in cateGoryList"
                        :key="index">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品价格">
                <el-input-number v-model="goods.goods_price"></el-input-number>
            </el-form-item>
            <el-form-item label="商品描述" >
                <el-input type="textarea" placeholder="商品描述" rows="4" v-model="goods.goods_title"></el-input>
            </el-form-item>
            <el-form-item label="详细信息" >
                <el-input type="textarea" placeholder="详细信息" rows="4" v-model="goods.goods_contents"></el-input>
            </el-form-item>
            <el-form-item label="商品图片">
                <!-- 上传图片 
                action:上传地址；
                list-type：（picture-card） 文件列表类型 （照片墙类型）
                on-preview：浏览图片时触发
                on-remove：删除图片时触发
                file-list:当前页面展示照片
                -->
                <!-- list-type="picture-card"  action="/dev-api/admin/product/fileUpload"-->
                <!-- http://127.0.0.1:3007/api/uploadImg 本地上传图片地址-->
                <el-upload action="http://106.52.214.110:8889/api/uploadImg" list-type="picture-card" :file-list='goodsImageList'
                    :on-change="uploadFile" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                    :on-success="handlerSuccess">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" class="avatar">
                </el-dialog>

            </el-form-item>
            <el-form-item>
                <!-- addOrUpdateSpu -->
                <el-button type="primary" @click="submitForm('addForm')">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'addGoods',

    data() {
        return {
            dialogImageUrl: "",
            dialogVisible: false,
            goods: {              //存储商品信息属性
                goods_name: "",        //商品名称
                goods_title: "",    //商品描述
                goods_contents: "",    //商品参数
                goods_price: 0,    //商品价格
                categoryId: '',         //分类
                goodsImageList: []
            },
            cateGoryList: [],   //存储分类信息
            goodsImageList: [],    //存储图片的数据
        };
    },

    mounted() {

    },

    methods: {
        async initData() {
            let res = await this.$API.reqGetCateGoryList()
            if (res.data.code == 200) {
                this.cateGoryList = res.data.data
            }
        },
        //照片墙删除触发
        handleRemove(file, fileList) {
            //file：删除的那张图片
            //fileList：删除那张图片后剩下的图片
            //收集删除后图片数据
            //数据里有name、url字段，提交给服务器时要删掉
            this.goodsImageList = fileList;
        },
        //照片墙图片预览回调
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        //图片上传成功的回调
        handlerSuccess(response, file, fileList) {
            //response：服务器发回来的一些信息
            //file:上传成功的图片
            //fileList：全部上传的图片
            this.goodsImageList = fileList;
            this.goods.goodsImageList.push(response.data)
        },
        uploadFile(file, fileList) {
            // this.goods.goodsImageList=this.goodsImageList //拿到的图片
            console.log(this.goods);
        },
        async submitForm() {
            if(this.goods.categoryId){
                const res = await this.$API.reqAddGoods(this.goods)
            console.log(res);
            this.$emit('changeScene',1);
            //清除数据
            Object.assign(this._data, this.$options.data());
            }else{
                alert('请正确输入信息')
            } 
        },
        //取消按钮返回
        cancel() {
            this.$emit('changeScene',0);
            Object.assign(this._data, this.$options.data());

        },
        

    },
};
</script>

<style  scoped>
.addGoods {
    background-color: #fff;
    padding: 30px;
}
</style>